<template>
  <div>
    <!--    单个图片-->
    <el-upload
      v-if="imgLimit == 1"
      class="avatar-uploader"
      :action="unploadUrl"
      :show-file-list="false"
      :on-success="handleAvatarSuccessOne"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imgList.length == 1 && (imageUrl.indexOf('mp4') == -1 && imageUrl.indexOf('mkv') == -1 && imageUrl.indexOf('wmv') == -1)" :src="imageUrl" class="avatar" />
      <video class="avatar" controls v-else-if="imgList.length == 1">
          <source :src="imageUrl" type="video/mp4">
          <source :src="imageUrl" type="video/mkv">
          <source :src="imageUrl" type="video/wmv">
      </video>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!--    多个图片-->
    <div v-if="imgLimit > 1">
      <el-upload
        :action="unploadUrl"
        :file-list="fileList"
        list-type="picture-card"
        :on-success="handleAvatarSuccess"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="beforeAvatarUpload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { unploadUrl } from '@/config'
export default {
  name: 'imgUpload',
  props: ['imgLimit', 'imgSize'],
  props: {
    imgLimit: {
      type: Number,
    },
    imgList: {
      type: Array,
      default: () => {
        return []
      },
    },
    imgSize: {
      type: Number,
      default: 2048,
    },
  },
  data() {
    return {
      imageUrl: '',
      unploadUrl: unploadUrl,
      dialogImageUrl: '',
      dialogVisible: false,
      imgPath: [],
      fileList: [],
      isOperation: false,
      serviceImgPath: [],
    }
  },
  watch: {
    imgList: {
      deep: true, //深度监听
      handler: function (val) {
        if (!val) return
        this.serviceImgPath = val
        //多图独回显
        let arr = []
        if (this.serviceImgPath.length > 1 || this.imgLimit > 1) {
          this.serviceImgPath.forEach((item) => {
            let obj = {
              url: this.showImg(item),
              path: item,
            }
            arr.push(obj)
          })

          if (!this.isOperation) {
            this.fileList = arr
          }
        } else {
          //单图回显
          this.imageUrl = this.showImg(val.join(','))
        }
      },
      immediate: true,
    },
  },
  methods: {
    //多图上传成功
    handleAvatarSuccess(res, file) {
      if (this.serviceImgPath.length > 0) {
        this.isOperation = true //上传时关闭监听操作
      }
      this.imgPath = this.imgPath.concat(res.data)
      this.serviceImgPath = this.serviceImgPath.concat(res.data)
      this.$emit('successPath', this.serviceImgPath)
    },
    //单图上传成功
    handleAvatarSuccessOne(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.$emit('successPath', res.data)
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg/png/jpg'
      // const isLt2M = file.size / 1024 / 1024 < this.imgSize
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (file.size / 1024 / 1024 > this.imgSize) {
        this.$message.error(`上传头像图片大小不能超过 ${this.imgSize}KB!`)
        return false
      } else {
        return true
      }
    },
    //删除图片
    handleRemove(file, fileList) {
      this.isOperation = true
      let isRemove
      let pathArr = []
      if (file.response) {
        isRemove = file.response.data.join(',')
        pathArr = this.imgPath.filter((item) => item != isRemove) //过滤删除后的图片
      } else {
        isRemove = file.path
        // pathArr = this.fileList.filter(item => item.path != isRemove)   //过滤删除后的图片
        this.fileList.filter((item) => {
          if (item.path != isRemove) {
            pathArr.push(item.path)
          }
          // item.path != isRemove
        })
      }
      this.$emit('successPath', pathArr)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
  },
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
  line-height: 148px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
